<template>
  <div id="app">
    <Header />
    <router-view class="main" />
    <Footer />
  </div>
</template>

<script setup>
import Header from "./components/common/Header.vue";
import Footer from "./components/common/Footer.vue";
</script>

<style scoped>
.main {
  /* background-color: #E9EEF3; */
  color: #333;
  text-align: center;
  margin: 78px auto;
  min-height: 550px;
}
@media screen and (max-width: 600px) {
  .main {
    width: 95%;
    padding: 3px;

    position: relative;
    top: 0;
    bottom: 0;
  }
}
@media screen and (min-width: 1196px) {
  .main {
    width: 1024px;
  }
}
</style>
